<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
            <h2>当前的n值是:{{n}}</h2>
            <button @click="add">点我n+1</button>
            <button @click="bye">点我销毁VM</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        new Vue({
            el:'#root',
            // template:`
            // <div>
            //     <h2>当前的n值是:{{n}}</h2>
            //     <button @click="add">点我n+1</button>
            // </div>`,
            data:{
                n:1
            },
            methods: {
                add(){
                    console.log("add")
                    this.n++;
                },
                bye(){
                    console.log("准备调用销毁")
                    this.$destroy();
                }
            },
            watch:{
                n(){
                    console.log("n变了")
                }
            },
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this);
            },

            created() {
                console.log('created')
                console.log(this);
            },

            beforeMount() {
                console.log('beforeMount')
            },
            mounted() {
                console.log('mounted')
                console.log(this);
            },

            beforeUpdate() {
                console.log('beforeUpdate')
            },
            updated() {
                console.log('beforeUpdate')
            },
            beforeDestroy() {
                console.log("beforeDestroy")
            },
            destroyed() {
                console.log("destroyed")
            },

        })

	</script>
</html>